<template>
  <div>
    <TypeNav />
    <div class="add2CartSuccess">
      <div class="add2CartSuccess-content">
        <div class="add2CartSuccess-success">
          <div class="icon-success"></div>
          商品已成功加入购物车！
        </div>
        <div class="add2CartSuccess-goodsInfo">
          <div class="as-goods-img">
            <img :src="goodsInfo.skuImg" alt="tupian" />
          </div>
          <div class="goods-skuName">
            <p>{{ goodsInfo.skuName }}</p>
            <div class="sale-attr">
              {{ goodsInfo.skuSaleAttr && goodsInfo.skuSaleAttr[0] }} /
              {{ goodsInfo.skuSaleAttr && goodsInfo.skuSaleAttr[1] }} / 数量：{{
                goodsInfo.skuNum
              }}
            </div>
          </div>
          <div class="as-opas">
            <button class="back2detail" @click="$router.back()">
              查看商品详情
            </button>
            <button class="go2cart-page">
              <router-link to="/cart">去购物车结算</router-link>
              <i class="icon-to-cart"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TypeNav from '@/components/TypeNav'
export default {
  name: 'addCartSuccess',
  data() {
    return {
      goodsInfo: {},
    }
  },
  components: {
    TypeNav,
  },
  mounted() {
    const data = JSON.parse(localStorage.getItem('goodsInfo'))
    if (!data) this.$router.push('/home')
    this.goodsInfo = data
  },
}
</script>

<style scoped lang="less">
.add2CartSuccess {
  background-color: #f5f5f5;
  margin-bottom: 20px;
  min-width: 1200px;
  padding-bottom: 20px;
}
.add2CartSuccess-content {
  width: 1200px;
  margin: 0 auto;
}
.add2CartSuccess-success {
  padding: 10px 0;
  line-height: 24px;
  display: flex;
  font-size: 18px;
  color: #71b247;
}
.icon-success {
  background-image: url('./addtocart-icons.png');
  width: 30px;
  height: 30px;
  margin-right: 5px;
}
.add2CartSuccess-goodsInfo {
  display: flex;
  justify-content: space-between;
}
.as-goods-img {
  width: 60px;
  height: 60px;
  border: 1px solid #eee;
  img {
    width: 100%;
    height: 100%;
  }
}
.goods-skuName {
  margin-left: -310px;
}
.goods-skuName p {
  width: 500px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 30px;
}
.goods-skuName .sale-attr {
  color: #aaa;
}
.as-opas {
  margin-top: 25px;
}
.as-opas button {
  height: 36px;
  line-height: 36px;
  padding: 0 20px;
  outline: none;
  border: 1px solid transparent;

  font-size: 16px;
  cursor: pointer;
  &.go2cart-page {
    background-color: #e2231a;
    a {
      color: #fff;
      text-decoration: none;
    }
    position: relative;
    padding-right: 30px;
    &:hover {
      background-color: #c91623;
    }
  }
}
.as-opas button.back2detail {
  background-color: #fff;
  color: #e2231a;
  margin-right: 10px;

  &:hover {
    border: 1px solid #c91623;
  }
}
.icon-to-cart {
  background-image: url('./addtocart-icons.png');
  background-repeat: no-repeat;
  background-position: -13px -82px;
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 9px;
  right: 10px;
}
</style>
